<template>
  <el-dialog
    append-to-body
    center
    width="1000px"
    :title="title"
    :visible.sync="visible"
  >
    <el-form ref="form" :model="form">
      <el-table :data="form.list" height="600px" stripe fit>
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="80"
        ></el-table-column>
        <el-table-column
          label="菜单功能"
          align="left"
          prop="name"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作权限" align="left">
          <template slot-scope="scope">
            <el-checkbox
              :indeterminate="scope.row.isIndeterminate"
              v-model="scope.row.checkAll"
              @change="(value) => handleCheckAllChange(value, scope.row)"
            >
              全选
            </el-checkbox>
            <el-checkbox-group
              v-model="scope.row.actionId"
              @change="(value) => handleCheckedCitiesChange(value, scope.row)"
            >
              <el-checkbox
                v-for="item in scope.row.actions"
                :key="item.actionId"
                :label="item.actionId"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnLoading" @click="submitForm">
        确 定
      </el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { roleActionList, bindActions } from "@/api/role";
import { getMenuTree } from "@/api/menu";

export default {
  data() {
    return {
      visible: false,
      title: "权限设置",
      form: {
        list: [],
      },
      roleData: {},
      btnLoading: false,
      loading: false,
    };
  },
  mounted() {
    this.getMenu();
  },
  methods: {
    init(row) {
      this.roleData = row;

      if (row.roleId) {
        this.getData();
      }

      this.title = `${row.name}权限设置`;
      this.visible = true;
    },
    getMenu() {
      getMenuTree().then((res) => {
        this.form.list = (res.data.items || []).map((item) => ({
          ...item,
          actionId: [],
          checkAll: false,
          isIndeterminate: true,
        }));
      });
    },
    cancel() {
      this.visible = false;
    },
    handleCheckAllChange(value, row) {
      row.actionId = value ? row.actions.map((item) => item.actionId) : [];
      row.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value, row) {
      let checkedCount = value.length;
      row.checkAll = checkedCount === row.actions.length;
      row.isIndeterminate =
        checkedCount > 0 && checkedCount < row.actions.length;
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let tempList = [];

          this.form.list.forEach((item) => {
            if (item.actionId && item.actionId.length) {
              tempList.push({
                menuId: item.menuId,
                actionId: item.actionId,
              });
            }
          });

          let params = {
            roleId: this.roleData.roleId,
            menuActions: tempList,
          };

          this.btnLoading = true;

          bindActions(params)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("操作成功");
                this.cancel();
                this.$emit("getList");
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            })
            .finally(() => (this.btnLoading = false));
        }
      });
    },
    getData() {
      this.loading = true;

      roleActionList({ roleId: this.roleData.roleId })
        .then((res) => {
          let tempList = res.data.items || [];

          this.form.list = this.form.list.map((item) => {
            let tempMenu = tempList.find((it) => it.menuId == item.menuId);

            if (tempMenu) {
              item.actionId = tempMenu.actionId;
              item.checkAll = tempMenu.actionId.length === item.actionId.length;
              item.isIndeterminate =
                tempMenu.actionId.length > 0 &&
                tempMenu.actionId.length < item.actions.length;
            } else {
              item.actionId = [];
              item.checkAll = false;
              item.isIndeterminate = false;
            }
            return item;
          });
        })
        .finally(() => (this.loading = false));
    },
  },
};
</script>

<style></style>
